<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
    <style>
        :root {
          font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
          line-height: 1.5;
          font-weight: 400;

          color-scheme: light dark;
          color: rgba(255, 255, 255, 0.87);
          background-color: #242424;

          font-synthesis: none;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        a {
          font-weight: 500;
          color: #646cff;
          text-decoration: inherit;
        }
        a:hover {
          color: #535bf2;
        }

        h1 {
          font-size: 3.2em;
          line-height: 1.1;
          margin: 10px 0;
        }
        h2 {
          font-size: 2.8em;
          line-height: 1.1;
          margin: 10px 0;
        }
        h3 {
          font-size: 2.4em;
          line-height: 1.1;
          margin: 10px 0;
        }
        h4 {
          font-size: 1.8em;
          line-height: 1.1;
          margin: 8px 0;
        }
        h5 {
          font-size: 1.6em;
          line-height: 1.1;
          margin: 6px 0;
        }
        h6 {
          font-size: 1.2em;
          line-height: 1.1;
          margin: 4px 0;
        }

        .logo {
          height: 6em;
          padding: 1.5em;
          will-change: filter;
          transition: filter 300ms;
        }
        .logo:hover {
          filter: drop-shadow(0 0 2em #646cffaa);
        }
        .logo.vanilla:hover {
          filter: drop-shadow(0 0 2em #3178c6aa);
        }

        .card {
          padding: 2em;
        }

        .read-the-docs {
          color: #888;
        }

        button {
          border-radius: 8px;
          border: 1px solid transparent;
          padding: 0.6em 1.2em;
          font-size: 1em;
          font-weight: 500;
          font-family: inherit;
          background-color: #1a1a1a;
          cursor: pointer;
          transition: border-color 0.25s;
        }
        button:hover {
          border-color: #646cff;
        }
        button:focus,
        button:focus-visible {
          outline: 4px auto -webkit-focus-ring-color;
        }

        @media (prefers-color-scheme: light) {
          :root {
            color: #213547;
            background-color: #ffffff;
          }
          a:hover {
            color: #747bff;
          }
          button {
            background-color: #f9f9f9;
          }
        }
        html,body {
            width: 100vw;
            height: 100vh;
        }
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .row {
            display: flex;
            justify-content: stretch;
        }

        #toolbar {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        #sidebar {
            min-width: 300px;
        }
        #canvas-container {
            flex: 1 0 auto;
        }
        input[type=number] {
            max-width: 40px;
        }
    </style>
  </head>
  <body>
    <div id="toolbar">
    </div>
    <div class="row" style="flex: 1 0 auto">
        <div id="sidebar">
        </div>
        <div id="canvas-container">
            <canvas id="canvas"/>
        </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
